<template>
  <div class="Main">
    <app-header active="digitalResource-journal"></app-header>
   <div class="page_content">
            <x-card class="card">
                <div class="search_operate">
                    <base-select class="select_field" v-model="searchParam.streage" :show-label="false">
                        <base-option value="all" label="全部"></base-option>
                        <base-option value="title" label="名称"></base-option>
                    </base-select>

                    <base-input class="select_value" v-model="searchParam.search" placeholder="输入检索词" :show-label="false"> </base-input>

                    <base-button type="primary" @click="getJournal"> 检索 </base-button>
                    <!-- <base-button type="text" @click="getJournal"> 高级检索 </base-button> -->
                    <base-select size="mini" class="filter_select" clearable placeholder="更新时间排序" v-model="searchParam.orderFile"  @change="getJournal"  :show-label="false" style="width: 110px;margin-left: auto;">
                        <base-option v-for="(item,index) in orderAgg" :key="'filter-tag'+index" :value="item.value" :label="item.key"> </base-option>
                    </base-select>
                </div>
            </x-card>
            <x-card class="card">
                <div class="search_filter">
                    <div class="filter_text">更多筛选</div>
                    <base-select size="mini" class="filter_select" clearable placeholder="学科分类" v-model="searchParam.subject" @change="getJournal" :show-label="false">
                        <base-option v-for="(item,index) in subjectAgg" :key="'filter-category'+index" :value="item.value" :label="item.value"> </base-option>
                    </base-select>
                    <base-select size="mini" class="filter_select" clearable placeholder="主办单位" v-model="searchParam.organizerIns"  @change="getJournal"  :show-label="false">
                        <base-option v-for="(item,index) in organizerInsAgg" :key="'filter-organizer'+index" :value="item.value" :label="item.value"> </base-option>
                    </base-select>
                    <base-select size="mini" class="filter_select" clearable placeholder="期刊主题" v-model="searchParam.journalTheme"  @change="getJournal"  :show-label="false">
                        <base-option v-for="(item,index) in themeAgg" :key="'filter-tag'+index" :value="item.value" :label="item.value"> </base-option>
                    </base-select>
                    <base-select size="mini" class="filter_select" clearable placeholder="核心收录" v-model="searchParam.coreInclusion"  @change="getJournal"  :show-label="false">
                        <base-option v-for="(item,index) in coreInclusionsAgg" :key="'filter-tag'+index" :value="item.value" :label="item.value"> </base-option>
                    </base-select>
                    <base-date-picker
                      v-model="dateRange"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      value-format="yyyy-MM-dd"
                      @change="getJournal">
                    </base-date-picker>
                  
                </div>
            </x-card>   
            <x-card v-if="loading" class="bounce-loading">
                <bounce-loading></bounce-loading>
            </x-card>
            <x-card v-else  class="card">
                <div class="search_result" v-if="total > 0">
                    <div class="search_result_operate">
                        <div>
                            <span class="result_total_text">共找到 </span>
                            <span class="result_num">{{total}} 个 期刊</span>
                        </div>
                        <base-button type="info" size="small" @click="batchCarts"> 批量加入购物车 </base-button>
                    </div>
                    <base-divider></base-divider>
                    <div class="search_result_list">
                         <div class="row">
                            <div class="search_result_item" v-for="item,index in journalList" :key="index">
                                <div class="search_result_item_base" >
                                   <div class="search_result_item_input">
                                        <base-checkbox v-model="checkedList[index]"></base-checkbox>
                                        <div class="search_result_item_collect">
                                            <span @click="recommendation(item)"><img class="icon" :src="item.userRecommendationStatus == 1 ? require('../assets/images/page/tuijian_active.png')  : require('../assets/images/page/tuijian.png')"/>推荐</span>
                                            <span @click="collection(item)"><img class="icon" :src="item.userCollectionStatus == 1 ? require('../assets/images/page/collect_active.png') : require('../assets/images/page/collect.png')" />收藏</span>
                                        </div>
                                   </div>
                                   <div class="search_result_item_cover">
                                        <img :src="item.coverImg.replace('http://124.16.154.205:9000/','/minioUrl/')" @click="$router.push('/journalDetail/' + item.id)"/>
                                         <!-- <img src="../assets/images/home/news_cover.png" /> -->
                                   </div>
                                    <div class="search_result_item_desc">
                                        <div class="search_result_item_title" @click="$router.push('/journalDetail/' + item.id)">{{ item.journalTitle }}</div>
                                        <div class="search_result_item_issn">ISSN:{{ item.issn }}</div>
                                        <div class="search_result_item_description">{{ item.journalDesc }}</div>
                                    </div>
                                     <div class="search_result_item_icon">
                                        <div><img class="icon" src="../assets/images/page/zhu.png" />IF：1,694</div>
                                        <div><img class="icon" src="../assets/images/page/hit.png" /> {{ item.hit ?? 343 }}次</div>
                                        <div><img class="icon" src="../assets/images/page/collect1.png" /> {{ item.countCollection }}人</div>
                                     </div>
                                     <div class="search_result_item_new">
                                        <base-tag size="mini">新刊推荐</base-tag>
                                        <base-tag type="danger" size="mini">{{ item.subject }}</base-tag>
                                     </div>
                                      <div class="search_result_item_price">
                                        <span class="search_result_item_number">￥ {{ item.yearPrice }}</span><span class="search_result_item_year">/年</span>
                                      </div>
                                </div>
                                <div class="search_result_item_operate">
                                    <base-button type="primary" @click="addOrder(item)"> 立即订购 </base-button>
                                    <base-button type="text" @click="addCart(item)"> 加入购物车 </base-button>
                                </div>
                            </div>
                         </div>
                         
                    </div>

                    <div class="page-warp">
                        <base-pagination
                            @current-change="getJournal"
                            background
                            layout="prev, pager, next"
                            :total="total"
                            :page-size="searchParam.size"
                            :current-page.sync="searchParam.page"
                        ></base-pagination>
                    </div>
                </div>
                <Empty v-if="total == 0"></Empty>
            </x-card>
        </div>

    <app-footer></app-footer>
  </div>
</template>

<script>
import {XCard} from "@zkwq/business";
import AppHeader from './components/AppHeader.vue'
import AppFooter from './components/AppFooter.vue'
import {GetAllJournal,GetJournalAgg} from "@/service/journal";
import {EditCart,BatchCarts} from '../service/cart'
import {EditOrder} from '../service/order'
import {AddRecommendation,CancelRecommendation} from '../service/recommendation'
import {AddCollection,CancelCollection} from '../service/collection'
import Empty from './components/Empty.vue'
export default {
  name: 'Journal',
  components: {
    AppHeader,
    AppFooter,
    XCard,Empty
  },
  data() {
    return {
      searchParam:{
          page:1,
          size:10,
          streage:"all",
          orderFile:'',
          search:'',
          subject:'',
          organizerIns:'',
          journalTheme:'',
          coreInclusion:'',
          startTime:'',
          endTime:'',
          status:1,
      },
      value:false,
      dateRange:[],
      loading:false,
      total:0,
      journalList:[],
      subjectAgg:[],
      organizerInsAgg:[],
      coreInclusionsAgg:[],
      themeAgg:[],
      checkedList: [],
      orderAgg:[{key:'更新时间排序',value:'time'},{key:'热度排序',value:'hit'},{key:'相关度排序',value:'score'}]
    }
  },
  mounted() {
    this.getJournal();
    this.getJournalAgg();
  },
  methods: {
    getJournal(){
            if (this.dateRange){
                const [startDate, endDate] = this.dateRange;
                this.searchParam.startTime = startDate;
                this.searchParam.endTime = endDate;
            }else {
                this.searchParam.startTime = '';
                this.searchParam.endTime = '';
            }
           this.searchParam.magazineId = this.magazine?.id;
          GetAllJournal(this.searchParam).then(e => {
              if (e && e.data && e.data.records){
                  this.journalList = e.data.records;
                  this.total = e.data.total
              }
          }).catch(e => {
              this.$message.error(e.message)
          })
    },
    getJournalAgg(){
        let params = {
            magazineId: this.magazine?.id,
        }
          GetJournalAgg(params).then(e => {
              if (e && e.data){
                this.subjectAgg = e.data.subjectAgg;
                this.themeAgg = e.data.themeAgg;
                this.organizerInsAgg = e.data.organizerInsAgg;
                this.coreInclusionsAgg = e.data.coreInclusionsAgg;
              }
          }).catch(e => {
              this.$message.error(e.message)
          })
    },
    getCheckedValues() {
      return this.journalList.filter((_, index) => this.checkedList[index]);
    },
    batchCarts() {
        let checkData =  this.getCheckedValues();
        if (checkData && checkData.length>0) {
            let params = checkData.map(e=>{
                return {
                    "userId": this.user.id,
                    "resourceType":'journal',
                    "resourceId":e.id
                }
            })
            BatchCarts(params).then(res=>{
                if(res.code == -1){
                    this.$message.error(res.msg);
                    return;
                }
                this.$message.success(res.msg);
                this.$router.push("/cart");
            })
        } else {
            this.$message.warning("请选择要加入购物车的内容");
        }
      },
    addCart(item){
         EditCart({
             "userId": this.user.id,
             "resourceType":'journal',
             "resourceId":item.id,
             "price":item.yearPrice,
         }).then(res=>{
             if(res.code == -1){
                 this.$message.error(res.msg);
                 return;
             }
             this.$message.success(res.msg);
             this.$router.push("/cart");
         })
     },
    addOrder(item){
        let params = {
            orderUserId: this.user.id,
            orderResourceList:[{
                resourceId: item.id,
                resourceType: 'journal',
                resourceName: item.journalTitle,
                unitPrice: item.yearPrice,
                realPaid: item.yearPrice
            }]
        }
        EditOrder(params).then(res => {
            if (res.code == -1) {
                this.$message.error(res.msg);
                return;
            }
            this.$message.success(res.msg);
            // window.open(this.$router.resolve("/order/"+res.data.id).href)
        })
    },
    //推荐
    recommendation(item){
        if (item.userRecommendationStatus == 1){
            CancelRecommendation({resourceId: item.id, resourceType: 1}).then(res => {
                if (res.code == -1) {
                    this.$message.error(res.msg);
                    return;
                }
                this.$set(item,'userRecommendationStatus',2)
                this.$message.success(res.msg);
            })
        }else {
            AddRecommendation({resourceId: item.id, resourceType: 1}).then(res => {
                if (res.code == -1) {
                    this.$message.error(res.msg);
                    return;
                }
                this.$set(item,'userRecommendationStatus',1)
                this.$message.success(res.msg);
                // window.open(this.$router.resolve("/usercenter/").href)
            })
        }
    },
    //收藏
    collection(item){
        if (item.userCollectionStatus == 1){
            CancelCollection({resourceId: item.id, resourceType: 1}).then(res => {
                if (res.code == -1) {
                    this.$message.error(res.msg);
                    return;
                }
                this.$set(item,'userCollectionStatus',2)
                this.$set(item,'countCollection',item.countCollection -= 1)
                this.$message.success(res.msg);
            })
        }else {
            AddCollection({resourceId: item.id, resourceType: 1}).then(res => {
                if (res.code == -1) {
                    this.$message.error(res.msg);
                    return;
                }
                this.$set(item,'userCollectionStatus',1)
                this.$set(item,'countCollection',item.countCollection += 1)
                this.$message.success(res.msg);
                // window.open(this.$router.resolve("/usercenter/").href)
            })
        }
    },
  },
  watch: {
    
  }
}
</script>

<style lang="scss">
.Main{
    .base-input--suffix .base-input__inner {
        padding-left: 12px !important;
    }
    .filter_select{
        margin-right: 20px;
        .base-input__inner{
            color: #3B7AA3;
        }
    }
}
</style>
<style lang="scss" scoped>
.Main{
    height:100%;
    width: 100%;
    overflow: auto;
    .bounce-loading{
        height:70vh;
        align-items: center;
        justify-content: center;
    }
    .base-button--primary {
        background-color: #3F7FA7;
        border-color: #3F7FA7;
    }
    .base-input {
      border: 1px solid #bfc3de;
      background-color: #fff;
      border-radius: 4px;
      padding: 0 12px 0 16px;
      -webkit-transition: border-color .3s;
      transition: border-color .3s;
    }
    .base-input__placeholder{
        left: 12px;
    }
    .base-select{
        border: 1px solid #bfc3de !important;
        background-color: #fff;
    }
    .page_content{
        min-height: calc(100vh - 288px);
        position: relative;
        width: 1200px;
        margin: 20px auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        .card{
            padding: 18px 0px;
            .search_operate{
                display: flex;
                align-items: center;
                .select_field{
                    width: 120px;
                }
                .select_value{
                    width: 700px;
                }
                .base-button--primary{
                    padding: 0px 33px 0 33px;
                }
                .base-button--text{
                    color: #3B7AA3;
                    background: #ecf5ff;
                    padding: 0 12px 0 12px;
                }
           }
           .search_filter{
                display: flex;
                align-items: center;
                .filter_text{
                    color: #999;
                    margin-right: 20px;
               }
               .filter_select{
                    border: 0px solid #bfc3de !important;
                    width:150px;
                    background: #ecf5ff;
                    .base-input__inner{
                        color: #3B7AA3;
                    }
               }
           }
           .search_result{
                .search_result_operate{
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .result_total_text{
                            color: #999;
                        }
                }
                .search_result_list{
                    display: flex;
                    flex-direction: column;
                    gap: 20px;
                    .row{
                       display: flex;
                        flex-wrap: wrap;        /* 超出自动换行 */
                        gap: 16px;  
                         .search_result_item{
                            flex: 0 0 calc((100% - 32px) / 3);   /* 32px = gap * 2 */
                            display: flex;
                            padding: 20px;
                            border: 1px solid #dcdfe6;
                            border-radius: 4px;
                            flex-direction: column;
                            .search_result_item_input{
                                display: flex;
                                justify-content: space-between;
                                align-items:center;
                                cursor: pointer;
                                .search_result_item_collect{
                                    display: flex;
                                    align-items: center;
                                    font-size: 12px;
                                    span{
                                        display: flex;
                                        align-items: center;
                                    }
                                }
                            }
                            .search_result_item_desc{
                                font-size: 14px;
                                .search_result_item_title{
                                    font-size: 16px;
                                    font-weight: bolder;
                                    margin: 10px 0px;
                                }
                                .search_result_item_issn{
                                    color: #999;
                                    margin: 10px 0px;
                                }
                                .search_result_item_description{
                                    color: #999;
                                    margin: 10px 0px;
                                    overflow: hidden;
                                    display: -webkit-box;
                                    -webkit-line-clamp: 3;
                                    -webkit-box-orient: vertical;
                                }
                            }
                            .search_result_item_icon{
                                display: flex;
                                color: #999;
                                div{
                                    display: flex;
                                    align-items: center;
                                    margin-right: 10px;
                                    img{
                                        margin-right: 5px;
                                    }
                                }
                            }
                            .search_result_item_new{
                                margin: 10px 0px;
                                .base-tag{
                                    margin-right: 5px;
                                }
                            }
                            .icon{
                                width: 20px;
                            }
                            .search_result_item_cover{
                                display: flex;
                                justify-content: center;
                                img{
                                    cursor: pointer;
                                    width: 150px;
                                    height: 180px;
                                }
                            }
                            .search_result_item_price{
                                margin-top: 20px;
                                .search_result_item_number{
                                    font-size: 22px;
                                    color: rgb(198 9 9);
                                    font-weight: bolder;
                                }
                                .search_result_item_year{
                                    color: #999;
                                }
                            }
                            .search_result_item_operate{
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    gap: 15px;
                                    margin-top: 20px;
                                    .base-button{
                                        padding: 0 40px;
                                        border-radius: 8px;
                                    }
                                    .base-button--text{
                                        border: 1px solid #3B7AA3;
                                        color: #3B7AA3;
                                        background-color: #fff;
                                    }
                            }
                        }
                    }
                   
                }
           }
           .page-warp{
                width: 100%;
                text-align: center;
                margin-top: 40px;
           }
        }
    }
}
</style>
